<script lang="ts" setup>
	import { onMounted, ref, computed } from 'vue'
	import { settingConfig } from '@/config/setting.config.js'


	onMounted(() => {
		getTime();
	})

	const getTimeData = ref(new Date());
	const getTime = () => {

		getTimeData.value = new Date();
		// console.log('getTimeDatagetTimeData', getTimeData.value.getFullYear())
		setTimeout(() => {
			getTime()
		}, 1000)
	}

	const dayOfWeek = computed(() => {
		const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

		return days[getTimeData.value.getDay()];
	})

	const navigateTo = (e) => {
		let path = '';
		switch (e) {
			case 'homeMusic':
				path = '/pages/evaluation/interestScales/interestScales'

				break;

			case 'homeVideo':
				path = '/pages/evaluation/taskList/taskList'

				break;
		}

		if (path != '') {
			uni.navigateTo({
				url: path
			})

		}
	}

	const tetst = () => {
		uni.navigateTo({
			url: '/pages/index/article/article?id=1740631627726757889'
		})
	}

	const backToMain = () => {
		uni.redirectTo({
			url: '/pages/index/home/home'
		})
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<articleTable ref="timer"></articleTable>
	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" title="心理测评"
		class="absolute" customLeft @clickLeft="backToMain">
	</Navigator>
	<view @touchend="handleEnd" class="wh100p relative">
		<view class="bg wh100p flex-center">
			<img v-if="settingConfig.bgIcon!=null" style="width:50%;opacity: 0.1;" :src="'@/../static/img/loginLogo.svg'" />
		</view>
		<view class="relative  body-box">
			<view class="absolute flex-center w100p mt50">
			</view>
			<view class=" wh100p flex-column flex-center">
				<view style="height: 50%;">
					<view class=" flex-around">
						<view class="big-item-box bg-E3D694-E7AD68 click-scale"
							style="width: 28%;height: 250px;border-radius: 15px;" @click="navigateTo('homeVideo')">
							<view class="flex-center">
								<img class="item-icon " :src="'@/../static/img/home/xlcp.svg'" />
							</view>
							<view class="item-content mt20">
								量表测评
							</view>
						</view>
						<view class="big-item-box bg-8798FF-468AED click-scale"
							style="width: 28%;height: 250px;border-radius: 15px;" @click="navigateTo('homeMusic')">
							<view class="flex-center">
								<img class="item-icon " :src="'@/../static/img/home/qwcp.svg'" />
							</view>
							<view class="item-content mt20">
								趣味测评
							</view>
						</view>
						<view v-if="true" class="big-item-box  click-scale"
							style="width: 28%;height: 250px;border-radius: 15px;">

						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<style>
	.bg {
		background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);
		background-size: cover;
		/* 背景图放大并保持纵横比 */
		background-repeat: no-repeat;
		/* 背景图不重复 */
		filter: blur(2px);
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.body-box {
		max-width: 1400px;
		width: 1400px;
		height: 100%;
		/* background-color: red; */
		box-sizing: border-box;
		/* padding: 5% 0; */
		/* z-index: 99; */
		margin: 0 auto;
	}

	.title {
		color: #FFF;
		font-family: PingFang SC;
		font-size: 50px;
		font-style: normal;
		font-weight: 600;
		line-height: 76.8px;
		/* 128% */
	}

	.big-item-box {
		display: flex;
		/* width: 516.667px; */
		/* height: 350px; */
		padding: 0px 30px;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.time-box {
		display: flex;
		width: 25px;
		height: 30px;
		padding: 6px 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 5px;
		background: #006EE3;
		font-size: 28px;
		color: white;
	}

	.time-text {
		color: #FFF;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		color: #FFF;
		text-align: center;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-family: PingFang HK;
		font-size: 26px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.time-colon {
		color: #024FA0;
		text-align: center;
		font-family: PingFang HK;
		font-size: 28px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		margin: 0 10px;
	}

	.icon-box {
		/* height: 50%; */
	}

	.item-icon {
		width: 80%;
		height: 100%;
		flex-shrink: 0;

	}

	.item-content {
		color: #FFF;
		text-align: center;
		text-shadow: 0px 3.6px 3.6px rgba(0, 0, 0, 0.25);
		font-family: PingFang HK;
		font-size: 36px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.bg-49BEFF-91D6A9 {

		background: linear-gradient(180deg, #49BEFF 0%, #3186FC 100%), linear-gradient(239deg, #91D6A9 17.23%, #66C181 99.93%), #FAFAFA;
	}

	.bg-91D6A9-FAFAFA {

		background: linear-gradient(239deg, #91D6A9 17.23%, #66C181 99.93%), #FAFAFA;
	}

	.bg-8798FF-468AED {
		background: linear-gradient(246deg, #8798FF -0.06%, #576BE2 101.72%), linear-gradient(239deg, #468AED 17.23%, #4767EB 99.93%), #FAFAFA;
	}

	.bg-B8A1F7-B67BF4 {
		background: linear-gradient(224deg, #B8A1F7 2.68%, #B67BF4 99.93%), #FAFAFA;
	}

	.bg-EB9CA1-EB6F9B {
		background: linear-gradient(223deg, #EB9CA1 3.08%, #EB6F9B 98.48%), linear-gradient(0deg, #638AFF 0%, #638AFF 100%), #FFF;
	}

	.bg-E3D694-E7AD68 {
		background: linear-gradient(222deg, #E3D694 3.79%, #E7AD68 97.63%), #FAFAFA;
	}

	.bg-468AED-4767EB {
		background: linear-gradient(239deg, #468AED 17.23%, #4767EB 99.93%), linear-gradient(222deg, #E3D694 3.79%, #E7AD68 97.63%), #FAFAFA;

	}
</style>